<template>
  <div>{{ state.count }}</div>

  <hr />

  <!-- <div>姓名：{{ user.name }}</div> -->
  <div>年龄：{{ user.foo.num }}</div>
  <button @click="edit">修改</button>
</template>

<script setup lang="ts">
import { reactive, readonly, shallowReactive } from "vue";

// reactive 不接收基本类型数据，只接收引用类型。
// ref 取值和赋值都需要 .value，reactive 不需要。
// reactive 不能直接修改数据本身，会破坏响应式效果，而 ref 可以。

const state = reactive({ count: 0 });

// 【readonly】只读 不可修改
readonly(state);

// 【shallowReactive】浅层响应式
const user = shallowReactive({
  // name: "张三", // 如果存在并更新的话，整体数据都会更新（官方设计如此）。
  foo: {
    num: 18,
  },
});

const edit = () => {
  // user.name = "李四";
  user.foo.num = 19;
};
</script>
